<template>
	<view class="popup-content">
		<view class="popup-title">
			<text>{{ title }}</text>
			<view class="popup-cancel" @click="closePopup">
				<eui-uicons type="closeempty" size="36" color="#888888" />
			</view>
		</view>
		<view class="popup-default-content" v-if="taskMode==='5'">
			<eui-card-input v-model="formatData.c_approve_username" title="审批人" placeholder="" h-padding="0" type="text"
				displayable="false" />
		</view>
		<view class="line-view" />
		<view class="popup-default-content">
			<eui-card-input v-model="formatData.c_time" title="预计用时" h-padding="0" type="text" ref="inputime"
				displayable="false" placeholder=""/>
		</view>
		<view class="line-view" />
		<view class="popup-default-content" @click="chooseTime('start')">
			<view class="date-view-content">
				<view class="left-title m-card-input-title">计划开始时间<text class="is-required">*</text></view>
				<view style="display:flex">
					<text class="right-content">{{dayjs(formatData.c_plan_begin_time).format('YYYY-MM-DD HH:mm')}}</text>
					<view style="margin-left: 18rpx;" v-if="!hasStart">
						<eui-uicons size='24' fontFamily="enjoyIcon5" customPrefix="icon-jiantouxiangyou"
							color="#888888" />
					</view>
				</view>
			</view>
		</view>
		<view class="line-view" />
		<view class="popup-default-content" @click="chooseTime('end')">
			<view class="date-view-content">
				<view class="left-title m-card-input-title">要求完成时间</view>
				<view style="display:flex">
					<text class="right-content">{{dayjs(formatData.c_require_complete_time).format('YYYY-MM-DD HH:mm')}}</text>
					<view style="margin-left: 18rpx;">
						<eui-uicons size='24' fontFamily="enjoyIcon5" customPrefix="icon-jiantouxiangyou"
							color="#888888" />
					</view>
				</view>
			</view>
		</view>
		<view class="line-view" />
		<view class="popup-default-content-textarea">
			<eui-card-input title="延期原因" v-model="formatData.c_reason" placeholder="请输入延期原因" h-padding="0"
				type="textarea" maxlength="100" />
		</view>
		<view class="line-view" />
		<!-- <view class="popup-tips">
			<text class="tips-text">
				<eui-uicons type="info" size="28" :color="themeColor" style="margin-top: 2rpx" />
				说明：完成时间根据开始时间自动计算：【计划完成时间】+【预计用时】+20
			</text>
		</view> -->
		<view class="popup-bottom">
			<eui-button title="延期" type="max" maxWidth="440" @buttonClick="buttonClick" />
		</view>

			<lekeDatetimeStyler
					    :value="formatData.c_plan_begin_time"
					    :visible="showDateStart"
					    :model="dateModel"
					    :yearsArr="yearsArr"
					    :isDark="false"
					    @cancel="handCancel"
					    @confirm="handConfirmStart"
					/>
			<lekeDatetimeStyler
					    :value="formatData.c_require_complete_time"
					    :visible="showDateEnd"
					    :model="dateModel"
					    :yearsArr="yearsArr"
					    :isDark="false"
					    @cancel="handCancel"
					    @confirm="handConfirmEnd"
					/>
	</view>
</template>

<script setup type="ts">
	import { ref, defineProps, watch, defineEmits, onMounted,computed } from 'vue';
	import { storeToRefs } from 'pinia';
	import { useThemeStore } from '@/store/themeStore';
	import useService from '@/hooks/useService';
	import { onShow } from "@dcloudio/uni-app";
	import dayjs from 'dayjs';
	import { useMainStore } from "@/store/modules/store";
	import lekeDatetimeStyler from './leke-datetime-styler/leke-datetime-styler.vue';
	const mainStore = useMainStore();
	const { loginInfo } = mainStore;
	const emit = defineEmits(["hidePopup","closePopup"]);
	const mainService = useService({ prefix: "mainApi" });
	const themeStore = useThemeStore(); // 主题
	const { theme } = storeToRefs(themeStore);
	const themeColor = ref(theme._object.theme == 'theme-blue' ? '#02B7E6' : '#FF6430');
	const popup = ref(null);
	const formatData = ref({
			c_plan_begin_time:"",
			c_require_complete_time:"",
			c_time:0,
			c_reason:"",
			c_allocation_userno:"",
			c_approve_userno:"",
			c_approve_username:""
	});

	// 时间选择
	const showDateStart = ref(false);
	const showDateEnd = ref(false);
	const dateModel = ref(['year', 'month', 'day', 'hour', 'minute']);
	const yearsArr = ref([dayjs().year(), dayjs().year()+10]);
	const timeIndex = ref(0);

	const props = defineProps({
	  /**
	   * 标题
	   * */
	  title: {
		type: String,
		default: '申请延期'
	  },
	  taskId:{
		  type:String,
		  default:''
	  },
	  taskMode:{
		  type:String,
		  default:''
	  },
	  hasStart:{
		  type:Boolean,
		  default:false
	  }
	});
	const FetchDelayTaskItem = async(id,mode)=>{
		let req = {
			TaskCode:id,
			TaskMode:mode
		}
		uni.showLoading({ title: "查询中...", mask: true });
		const res = await mainService.request('tasktodo', 'FetchDelayTaskItem', req);
		uni.hideLoading();
		if(res){
			formatData.value.c_plan_begin_time= res?.c_plan_begin_time||'';
			formatData.value.c_require_complete_time=res?.c_require_complete_time||'';
			formatData.value.c_time=res?.c_time||0;
			formatData.value.c_reason=res?.c_reason||'';
			formatData.value.c_allocation_userno = res?.c_allocation_userno||'';
		}
	}
	const fetchTaskDelayUserData = async(taskId)=>{
		uni.showLoading({ title: "查询中...", mask: true });
		const res = await mainService.request('tasktodo', 'FetchTaskDelayUserData', taskId);
		uni.hideLoading();
		if(!res.HasException){
			formatData.value.c_approve_userno = res.c_approve_userno||'';
			formatData.value.c_approve_username = res.c_approve_username||'';
		}
	}
	onShow(async () => {
		await FetchDelayTaskItem(props.taskId,props.taskMode);
		if(props.taskId&&props.taskMode==="5"){
			await fetchTaskDelayUserData(props.taskId)
		}
	})
	// 选择时间-取消
	const handCancel = (e) => {
	  showDateStart.value = false
	  showDateEnd.value = false;
	}
	// 选择时间
	const chooseTime = (type) => {
		if(type==='start'){
			//任务还未开始处理  只能改完成时间
			if(props.hasStart){
				return;
			}
			 showDateStart.value = true;
		}
		else{
			showDateEnd.value = true;
		}
	}
	// 选择开始时间-确认
	const handConfirmStart = (e) => {
	  formatData.value.c_plan_begin_time = dayjs(e).format('YYYY-MM-DD HH:mm');
	  formatData.value.c_require_complete_time =  dayjs(e).add((formatData.value.c_time||0),'m').format('YYYY-MM-DD HH:mm');
	  showDateStart.value = false;
	}
	// 选择结束时间-确认
	const handConfirmEnd = (e) => {
	  formatData.value.c_require_complete_time =  dayjs(e).format('YYYY-MM-DD HH:mm');
	  showDateEnd.value = false;
	}
	const closePopup = () => {
	  emit('closePopup');
	}
	const buttonClick = async () => {
		if(props.taskMode==="5"){
			if(!formatData.value.c_approve_userno){
				uni.showToast({
					duration: 2000,
					icon: 'none',
					title: '请先维护审批人'
				});
				return;
			}
		}
		if(!formatData.value.c_plan_begin_time){
			uni.showToast({
				duration: 2000,
				icon: 'none',
				title: '请选择开始时间'
			});
			return;
		}
		else{
			const inputTime = dayjs(formatData.value.c_plan_begin_time, "YYYY-MM-DD HH:mm");
			if (inputTime.isBefore(dayjs())) {
				uni.showToast({
					duration: 2000,
					icon: 'none',
					title: '任务计划开始时间不能小于当前时间！'
				});
				return;
			}
			const planTime = dayjs(inputTime).add(formatData.value.c_time||0,'m');
			const complateTime = dayjs(formatData.value.c_require_complete_time, "YYYY-MM-DD HH:mm");
			if(planTime.isAfter(complateTime)) {
				const message=`计划开始时间【${inputTime.format('YYYY-MM-DD HH:mm')}】加任务用时【${formatData.value.c_time||0}分钟】不能大于任务要求完成时间【${complateTime.format('YYYY-MM-DD HH:mm')}】！`;
				uni.showToast({
					duration: 2000,
					icon: 'none',
					title: message
				});
				return;
			}
		}
		await DelayTask();
	}

	const DelayTask = async()=>{
		 const p = {
			 TaskId: props.taskId,
			 DelayModel:props.taskMode,
			 PlanBeginTime: formatData.value.c_plan_begin_time,
			 RequireCompleteTime: formatData.value.c_require_complete_time,
			 Reason:formatData.value.c_reason ,
			 TaskRecvUserNo:loginInfo.sUser,
			 TaskApproveUserNo:formatData.value.c_approve_userno
			};
		uni.showLoading({ title: "正在处理...", mask: true });
		const res = await mainService.request('tasktodo', 'DelayTask', p);
    emit('closePopup');
    emit('hidePopup');
		uni.hideLoading();
	}
</script>

<style lang="scss" scoped>
	@import '@/main.scss';
	@import '@/static/font/enjoyicon5.0/iconfont.css';
	.popup-content {
		width: 100%;
		height: 100%;
		background: $uni-bg-color-inverse;
		border-radius: 20rpx;
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
	}

	.popup-title {
		width: 100%;
		height: 85rpx;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		font-family: $uni-font-family;
		font-weight: $uni-font-weight-level1;
		color: $uni-text-color-primary;
		font-size: $uni-font-size-level1;
		line-height: 45rpx;
		box-sizing: border-box;
		border-bottom: 1rpx solid $uni-line-color;
	}

	.popup-cancel {
		width: 50rpx;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		right: 16rpx;
	}

	.popup-default-content {
		width: 602rpx;
		height: 87rpx;
		display: flex;
		box-sizing: border-box;
		margin-left: 28rpx;
		padding-right: 28rpx;
	}

	.popup-default-content-textarea {
		width: 602rpx;
		height: auto;
		display: flex;
		box-sizing: border-box;
		margin-left: 28rpx;
		padding-right: 28rpx;
	}

	.line-view {
		width: 602rpx;
		height: 1rpx;
		margin-left: 28rpx;
		background: $uni-line-color;
		border-radius: 10rpx 10rpx 0 0;
	}

	.popup-tips {
		width: 574rpx;
		height: 68rpx;
		display: flex;
		font-style: normal;
		margin: 20rpx 28rpx;
		padding: 4rpx 20rpx;
		border-radius: 10rpx;
		background: rgba(1, 126, 255, 0.05);
		flex-direction: row;
		box-sizing: border-box;

		.tips-text {
			font-family: $uni-font-family;
			font-weight: $uni-font-weight-level1;
			color: $uni-text-color-title;
			font-size: $uni-font-size-level7;
			line-height: 30rpx;
		}
	}

	.popup-bottom {
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.date-view-content{
		display: flex;
		justify-content: space-between;
		flex: 1;
		padding: 24rpx 0rpx;
	}
	.left-title{
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #666666;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
	}
  .is-required {
    color: $uni-color-error;
  }
	.right-content{
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #000000;
		line-height: 40rpx;
		text-align: center;
		font-style: normal;
	}
</style>
